define(["utils","base","libs/dragula.min"],function(utils,baseClass,dragula){

      function InputText (config){
        this.itemType = config.type;
        var _this = this;
        this.rootInstance = config.rootInstance;
        this.itemData = config.itemData;
        var required = this.itemData.isRequired=="1"?"required":'';
        var placeholder= this.itemData.size==0?"请输入":"不超过"+this.itemData.size+"  个字";
        this.$el = $("<div class='row' id='"+this.itemData.id+"'></div>");
        this.label = $('<label class="'+required+'">'+this.itemData.title+'</label>');
        this.textArea = $('<textarea disabled="disabled" placeholder="'+placeholder+'">'+this.itemData.content+'</textarea>');
        this.$el.append(this.label).append(this.textArea);

        this.$el.bind("click",function(e){
          _this.rootInstance.itemSelected(_this);
        });
      }

      InputText.prototype = {
        selected:function(){
          var _this = this;
          if(!this.cover){
            this.delBtn = $("<div class='dc-designer-item-del displaynone'></div>");
            this.delBtn.bind("click",function(e){
              e.preventDefault();
              e.stopPropagation();
              _this.rootInstance.delItem(_this);
            });
            this.cover = $("<div class='dc-designer-item-cover displaynone'></div>");
            this.$el.append(this.cover);
            this.$el.append(this.delBtn);
          }
          this.$el.addClass("dc-designer-item-selected");
          this.cover.removeClass("displaynone");
          this.delBtn.removeClass("displaynone");
        },
        unSelected:function(){
          this.$el.removeClass("dc-designer-item-selected");
          this.cover.addClass("displaynone");
          this.delBtn.addClass("displaynone");
        },
        setTitle:function(title){
          this.itemData.title = title;
          this.label.html(title);
        },
        setDescription:function(description){
          this.itemData.description = description;
          this.textArea.attr("placeholder",this.itemData.description);
        },
        setReqiured:function(isRequired){
          var r = isRequired?"1":"0";
          this.itemData.isRequired = r;
          if(isRequired){
            this.label.addClass("required");
          }else{
            this.label.removeClass("required");
          }
        }
      }


      function InputDate (config){
        this.itemType = config.type;
        this.itemData = config.itemData;
        var _this = this;
        this.rootInstance = config.rootInstance;
        var required = this.itemData.isRequired=="1"?"required":'';
        this.$el = $("<div class='row' id='"+this.itemData.id+"'></div>");
        this.label = $('<label class="'+required+'">'+this.itemData.title+'</label>');
        var dateWrap = $('<div class="icon-date"></div>');
        this.value = this.itemData.content;
        this.input = $('<input  disabled="disabled" type="text" placeholder="请选择日期" value="'+this.itemData.content+'" disabled/>');
        dateWrap.append(this.input);
        this.$el.append(this.label).append(dateWrap);

        this.$el.bind("click",function(e){
          _this.rootInstance.itemSelected(_this);
        });
      }

      InputDate.prototype = {

        selected:function(){
          var _this = this;
          if(!this.cover){
            this.delBtn = $("<div class='dc-designer-item-del displaynone'></div>");
            this.delBtn.bind("click",function(e){
              e.preventDefault();
              e.stopPropagation();
              _this.rootInstance.delItem(_this);
            });
            this.cover = $("<div class='dc-designer-item-cover displaynone'></div>");
            this.$el.append(this.cover);
            this.$el.append(this.delBtn);
          }
          this.$el.addClass("dc-designer-item-selected");
          this.cover.removeClass("displaynone");
          this.delBtn.removeClass("displaynone");
        },
        unSelected:function(){
          this.$el.removeClass("dc-designer-item-selected");
          this.cover.addClass("displaynone");
          this.delBtn.addClass("displaynone");
        },
        setTitle:function(title){
          this.itemData.title = title;
          this.label.html(title);
        },
        setReqiured:function(isRequired){
          var r = isRequired?"1":"0";
          this.itemData.isRequired = r;
          if(isRequired){
            this.label.addClass("required");
          }else{
            this.label.removeClass("required");
          }
        }
      }

      function InputCheckbox(config){
        var _this = this;
        this.itemType = config.type;
        this.rootInstance = config.rootInstance;
        this.itemData = config.itemData;
        var required = this.itemData.isRequired=="1"?"required":'';

        this.$el = $("<div class='row' id='"+this.itemData.id+"'></div>");
        this.label = $('<label class="'+required+'">'+this.itemData.title+'</label>');
        this.checkboxWrap = $('<div class="checkbox-wraper"></div>');

        this.createOptions();
        this.$el.append(this.label).append(this.checkboxWrap);
        this.$el.bind("click",function(e){
          _this.rootInstance.itemSelected(_this);
        });
      }

      InputCheckbox.prototype = {
        selected:function(){
          var _this = this;
          if(!this.cover){
            this.delBtn = $("<div class='dc-designer-item-del displaynone'></div>");
            this.delBtn.bind("click",function(e){
              e.preventDefault();
              e.stopPropagation();
              _this.rootInstance.delItem(_this);
            });
            this.cover = $("<div class='dc-designer-item-cover displaynone'></div>");
            this.$el.append(this.cover);
            this.$el.append(this.delBtn);
          }
          this.$el.addClass("dc-designer-item-selected");
          this.cover.removeClass("displaynone");
          this.delBtn.removeClass("displaynone");
        },
        unSelected:function(){
          this.$el.removeClass("dc-designer-item-selected");
          this.cover.addClass("displaynone");
          this.delBtn.addClass("displaynone");
        },
        setTitle:function(title){
          this.itemData.title = title;
          this.label.html(title);
        },
        setReqiured:function(isRequired){
          var r = isRequired?"1":"0";
          this.itemData.isRequired = r;
          if(isRequired){
            this.label.addClass("required");
          }else{
            this.label.removeClass("required");
          }
        },
        createOptions:function(){
           this.checkBoxs = [];
          for(var j=0;j<this.itemData.options.length;j++){
            var checkboxItemWrap = $('<div class="checkbox-item"></div>');
            var checkBox = $('<input  disabled="disabled" id="checkbox'+j+'"  type="checkbox"'+j+' name="radio"/>');
            var checkBoxLabel = $('<label for="checkbox'+j+'">'+this.itemData.options[j].string+'</label>');
            checkboxItemWrap.append(checkBox).append(checkBoxLabel);
            this.checkboxWrap.append(checkboxItemWrap);
          }
        },
        setOptions:function(options){
          this.itemData.options = utils.copy(options);
          this.checkboxWrap.empty();
          this.createOptions();
        }
      }

      function InputRadio(config){
        this.itemType = config.type;
        var _this = this;
        this.rootInstance = config.rootInstance;
        this.itemData = config.itemData;
        var required = this.itemData.isRequired=="1"?"required":'';

        this.$el = $("<div class='row' id='"+this.itemData.id+"'></div>");
        this.label = $('<label class="'+required+'">'+this.itemData.title+'</label>');
        this.radioWrapper = $('<div class="radio-wraper"></div>');

        this.createOptions();
        this.$el.append(this.label).append(this.radioWrapper);
        this.$el.bind("click",function(e){
          _this.rootInstance.itemSelected(_this);
        });

      }
      InputRadio.prototype = {
        createOptions :function(){
          this.radioboxs = [];

           for(var k=0;k<this.itemData.options.length;k++){
            var radioItemWrap = $('<div class="radio-item"></div>');
            var radio = $('<input  disabled="disabled" id="radio'+k+'" type="radio"'+k+' name="radio"/>');
            var radioLabel = $('<label for="radio'+k+'">'+this.itemData.options[k].string+'</label>');
            radioItemWrap.append(radio).append(radioLabel);
            this.radioWrapper.append(radioItemWrap);
          }
        },
        selected:function(){
          var _this = this;
          if(!this.cover){
            this.delBtn = $("<div class='dc-designer-item-del displaynone'></div>");
            this.delBtn.bind("click",function(e){
              e.preventDefault();
              e.stopPropagation();
              _this.rootInstance.delItem(_this);
            });
            this.cover = $("<div class='dc-designer-item-cover displaynone'></div>");
            this.$el.append(this.cover);
            this.$el.append(this.delBtn);
          }
          this.$el.addClass("dc-designer-item-selected");
          this.cover.removeClass("displaynone");
          this.delBtn.removeClass("displaynone");
        },
        unSelected:function(){
          this.$el.removeClass("dc-designer-item-selected");
          this.cover.addClass("displaynone");
          this.delBtn.addClass("displaynone");
        },
        setTitle:function(title){
          this.itemData.title = title;
          this.label.html(title);
        },
        setReqiured:function(isRequired){
          var r = isRequired?"1":"0";
          this.itemData.isRequired = r;
          if(isRequired){
            this.label.addClass("required");
          }else{
            this.label.removeClass("required");
          }
        },
        setOptions:function(options){
          this.itemData.options =utils.copy(options) ;
          this.radioWrapper.empty();
          this.createOptions();
        }
      }

      function InputTextNum(config){
        var _this = this;
        this.itemType = config.type;
        this.rootInstance = config.rootInstance;
          this.itemData = config.itemData;
          var required = this.itemData.isRequired=="1"?"required":'';
          this.$el = $("<div class='row' id='"+this.itemData.id+"'></div>");
          this.label = $('<label class="'+required+'">'+this.itemData.title+'</label>');
          var numWrapper = $('<div class="icon-number"></div>');
          this.input = $('<input  disabled="disabled" type="number"/></div>')
          this.setDescription(this.itemData.description);
          numWrapper.append(this.input);
          this.$el.append(this.label).append(numWrapper);
          this.$el.bind("click",function(e){
            _this.rootInstance.itemSelected(_this);
          });
      }

      InputTextNum.prototype = {
        setUnit:function(val){
          this.itemData.unit = val;
          this.setDescription(this.itemData.description);
        },
        selected:function(){
          var _this = this;
          if(!this.cover){
            this.delBtn = $("<div class='dc-designer-item-del displaynone'></div>");
            this.delBtn.bind("click",function(e){
              e.preventDefault();
              e.stopPropagation();
              _this.rootInstance.delItem(_this);
            });
            this.cover = $("<div class='dc-designer-item-cover displaynone'></div>");
            this.$el.append(this.cover);
            this.$el.append(this.delBtn);
          }
          this.$el.addClass("dc-designer-item-selected");
          this.cover.removeClass("displaynone");
          this.delBtn.removeClass("displaynone");
        },
        unSelected:function(){
          this.$el.removeClass("dc-designer-item-selected");
          this.cover.addClass("displaynone");
          this.delBtn.addClass("displaynone");
        },
        setTitle:function(title){
          this.itemData.title = title;
          this.label.html(title);
        },
        setDescription:function(description){
          this.itemData.description = description;
          if(this.itemData.unit&&$.trim(this.itemData.unit).length>0){
            this.input.attr("placeholder",this.itemData.description+'(单位:'+this.itemData.unit+')');
          }else{
            this.input.attr("placeholder",this.itemData.description);
          }
        },
        setReqiured:function(isRequired){
          var r = isRequired?"1":"0";
          this.itemData.isRequired = r;
          if(isRequired){
            this.label.addClass("required");
          }else{
            this.label.removeClass("required");
          }
        }

      }



    var Component = function(config){
        var _this = this;
        Component.baseConstructor.call(this,config);
        this.$el.addClass("dc-designer-wrapper");


        var innerWrapper = $("<div class='dc-designer-wrapper-inner'></div>");

        this.leftWrap = $("<div class='dc-designer-wrapper-left'></div>");

        var title = $("<div class='dc-designer-title'>控件</div>");
        this.leftWrap.append(title);

        this.rightWrap = $("<div class='dc-designer-wrapper-right'></div>");


        this.toolMenu = $("<div class='dc-designer-tool-menu'></div>");
        this.initLeftToolMenu();

        innerWrapper.append(this.leftWrap).append(this.rightWrap);
        this.$el.append(innerWrapper);
        this.itemsDict = {};

        this.initEvent();

        var itemSelectedMethodName = this.config.comKey + "_itemselectted";
        this.itemSelectedMethod = this.pageview.plugin[itemSelectedMethodName];

        var itemDeleteMethodName = this.config.comKey + "_afteritemdelete";
        this.itemDelMethod = this.pageview.plugin[itemDeleteMethodName];


    }
    utils.extendClass(Component,baseClass);

    Component.prototype.itemSelected = function(itemInstance){
      if(this.curSelectedItem){
        this.curSelectedItem.unSelected();
      }
      this.curSelectedItem = itemInstance;
      itemInstance.selected();

      this.itemSelectedMethod.call(this.pageview.plugin,this,{itemInstance:itemInstance});
    };

    Component.prototype.delItem = function(itemInstance){
      var id = itemInstance.itemData.id.toString();
      this.curSelectedItem.$el.remove();
      delete this.itemsDict[id];
      this.curSelectedItem = null;
      this.itemDelMethod.call(this.pageview.plugin,this,{itemInstance:itemInstance});
    };




    Component.prototype.createItem  = function(itemData){
      var item;
      var type = itemData.type;
      var id = itemData.id.toString();
      if (type == "InputText") {
          item = new InputText({itemData: itemData, rootInstance: this,type:type});
      } else if (type == "InputDate") {
          item = new InputDate({itemData: itemData, rootInstance: this,type:type});
      } else if (type == "InputCheckbox") {
          item = new InputCheckbox({itemData: itemData, rootInstance: this,type:type});
      } else if (type == "InputRadio") {
          item = new InputRadio({itemData: itemData, rootInstance: this,type:type});
      } else if (type == "InputTextNum") {
          item = new InputTextNum({itemData: itemData, rootInstance: this,type:type});
      }
      if (item) {
          this.itemsDict[id] = item;
      }
      item.$el.attr("data-key",id);
      return item;
    };
    Component.prototype.bindData = function(data){
      this.itemsDict = {};
      for (var i = 0; i < data.length; i++) {
          var itemData = data[i];
          var id = itemData.id.toString();
          var item  = this.createItem(itemData);
          item && this.rightWrap.append(item.$el);
      }
    };
    Component.prototype.getPreviewDom = function(){
      return this.rightWrap.clone();
    };
    Component.prototype.getConfig = function(){
      var Re = [];
      var children = this.rightWrap.children();
      for(var i=0,j=children.length;i<j;i++){
        var key = children[i].getAttribute("data-key");
        Re.push(this.itemsDict[key].itemData);
      }
      return Re;
    };
    Component.prototype.destroy = function() {
      this.drake.destroy();
    };
    Component.prototype.initEvent = function() {
      var _this = this;
      var isFromLeftMenu = false;
      this.drake = dragula([this.toolMenu[0], this.rightWrap[0]],{
        copy: true,
        copy: function (el, source) {
          isFromLeftMenu = source ===_this.toolMenu[0];
          return isFromLeftMenu;
        },
        accepts: function (el, target) {
          return target !== _this.toolMenu[0];
        }
      });
      this.drake.on("drop",function(el, target, source, sibling) {
		// alert(888)
        if(isFromLeftMenu){
          _this.addDefaultItem(el, target, source, sibling);
        }
      });
    };
    Component.prototype.addDefaultItem = function(el, target, source, sibling) {
      var itemrole = el.getAttribute("data-role");
      var itemData;
      var id = new Date().valueOf();
      if(itemrole === "text") {
        itemData =  {
              "size": 0,
              "description": "请输入",
              "id": id,
              "title": "文本输入框",
              "isRequired": "0",
              "value": "",
              "content": "",
              "type": "InputText"
        };
      } else if(itemrole === "input") {
        itemData = {
            "type": "InputTextNum",
            "description": "请输入",
            "unit": "",
            "size": 0,
            "id": id,
            "title": "数字输入框",
            "isRequired": "0",
            "value": "",
            "content": ""
        };
      } else if(itemrole === "radio") {
        itemData = {
            "options": [{
                "string": "选项1"
            }, {
                "string": "选项2"
            }, {
                "string": "选项3"
            }],
            "checked": 0,
            "type": "InputRadio",
            "id": id,
            "title": "单选框",
            "isRequired": "0",
            "value": "",
            "content": ""
        };
      } else if(itemrole === "check") {
        itemData = {
            "options": [
                {
                    "string": "选项1"
                },
                {
                    "string": "选项2"
                },
                {
                    "string": "选项3"
                }
            ],
            "type": "InputCheckbox",
            "id": id,
            "title": "复选框",
            "isRequired": "0",
            "value": "",
            "content": ""
        };
      } else if(itemrole === "date") {
        itemData = {
              "dateType": "1",
              "type": "InputDate",
              "id": id,
              "title": "日期",
              "isRequired": "0",
              "value": "",
              "content": ""
          };
      } else if(itemrole === 'city') {
		  itemData = {
			  'dataType': ''
		  }
	  }

      var item = this.createItem(itemData);
      this.itemSelected(item);
      $(el).replaceWith(item.$el);


    };
    Component.prototype.initLeftToolMenu = function(){

      var textIcon = $("<div data-role='text' class='dc-designer-tool-icon-wrap'><div class='dc-designer-tool-icon dc-designer-tool-icon-text'></div><span>文本输入</span></div>");
      var inputIcon = $("<div data-role='input' class='dc-designer-tool-icon-wrap'><div class='dc-designer-tool-icon dc-designer-tool-icon-input'></div><span>数字输入</span></div>");
      var radioIcon = $("<div data-role='radio' class='dc-designer-tool-icon-wrap'><div class='dc-designer-tool-icon dc-designer-tool-icon-radio'></div><span>单选框</span></div>");
      var checkIcon = $("<div data-role='check' class='dc-designer-tool-icon-wrap'><div class='dc-designer-tool-icon dc-designer-tool-icon-check'></div><span>复选框</span></div>");
      var dateIcon = $("<div data-role='date' class='dc-designer-tool-icon-wrap'><div class='dc-designer-tool-icon dc-designer-tool-icon-date'></div><span>日期</span></div>");
	  var city = $("<div data-role='city' class='dc-designer-tool-icon-wrap'><div class='dc-designer-tool-icon dc-designer-tool-icon-city'></div><span>城市</span></div>");
	  var detail = $("<div data-role='detail' class='dc-designer-tool-icon-wrap'><div class='dc-designer-tool-icon dc-designer-tool-icon-detail'></div><span>明细</span></div>");
	  var money = $("<div data-role='money' class='dc-designer-tool-icon-wrap'><div class='dc-designer-tool-icon dc-designer-tool-icon-money'></div><span>金额</span></div>");
	  var editor = $("<div data-role='editor' class='dc-designer-tool-icon-wrap'><div class='dc-designer-tool-icon dc-designer-tool-icon-editor'></div><span>富文本</span></div>");
      this.toolMenu.append(textIcon, inputIcon, radioIcon, checkIcon, dateIcon/*, city, detail, money, editor*/);
      this.leftWrap.append(this.toolMenu);

    }
    return Component;
});
